<template>
  <div class="header-bar">
    <div class="exportHeader flex flex-row items-center justify-end">
      <div class="pr-[20px] flex flex-row items-center">
        <el-select
          v-model="state.photoSize"
          placeholder="请选择"
          style="width: 200px"
          :show-arrow="false"
          :offset="2"
          popper-class="custom_select--wrapperLeft"
        >
          <template #prefix>
            <span class="tipsTitle"> 大小： </span>
          </template>
          <el-option v-for="item in PICTURE_TYPE" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>

        <el-select
          v-model="state.photoFormat"
          placeholder="请选择"
          class="ml-[13px]"
          style="width: 200px"
          :show-arrow="false"
          :offset="2"
          popper-class="custom_select--wrapperLeft"
        >
          <template #prefix>
            <span class="tipsTitle"> 格式： </span>
          </template>
          <el-option v-for="item in state.photoFormatOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <el-button style="width: 110px" type="primary" class="ml-[30px]" @click="handleExport">
          <SvgIcon name="xz" color="#ffffff"></SvgIcon>
          <span style="padding-left: 8px">确认导出</span>
        </el-button>
      </div>
    </div>

    <div class="exportMain pt-[10px] pb-[10px]">
      <div class="flex flex-row items-center pl-[17px]">
        <SvgIcon name="eye" width="22" height="22" color="rgba(32, 36, 44, 1)"></SvgIcon>
        <span class="ml-[8px] exportTitle">预览</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { PICTURE_TYPE } from "@/constants/index.ts";
const emits = defineEmits(["on-export"]);

const state = reactive({
  photoSize: "1920×1080",
  photoFormat: "PNG",
  photoFormatOptions: [
    {
      label: "PNG",
      value: "PNG"
    },
    {
      label: "PDF",
      value: "PDF"
    }
  ]
});

// 导出
const handleExport = () => {
  const data = PICTURE_TYPE.find(v => v.value === state.photoSize);

  const params = {
    type: state.photoFormat,
    size: state.photoSize,
    value: data?.value,
    width: data.width || 2560,
    height: data.height || 1440
  };
  emits("on-export", params);
};
</script>

<style lang="scss" scoped>
.header-bar {
  width: 100%;
  height: 100%;
  background-color: rgba(239, 240, 245, 1);
  .exportHeader {
    height: 56px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
  }

  .tipsTitle {
    color: rgba(29, 33, 41, 1);
    font-size: 14px;
    text-align: left;
  }
  .exportMain {
    .exportTitle {
      color: rgba(29, 33, 41, 1);
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
